<!--
 * @Author: 冯向博
 * @Date: 2021-10-22 11:32:03
 * @LastEditTime: 2021-10-22 15:47:57
-->
<template>
	<view class="u-p-l-30 u-p-r-30">
		<u-form :model="form" ref="uForm" :error-type="errorType">
			<u-form-item label="昵称" prop="name" required>
				<u-input v-model="form.name" />
			</u-form-item>
		</u-form>
		<u-button @click="submit">提交</u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			errorType: ["message"],
			form: {
				name: "",
			},
			rules: {
				name: [
					{
						required: true,
						message: "请输入昵称",
						// 可以单个或者同时写两个触发验证方式
						trigger: ["change", "blur"],
					},
				],
			},
		};
	},
	onLoad() {},

	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
		this.form.name = this.vuex_user.name;
	},

	methods: {
		submit() {
			this.$refs.uForm.validate(async (valid) => {
				if (valid) {
					console.log(this.form);
					// 更新用户信息
					const update = await this.$u.api.userInfoUpdate(this.form);

					this.$u.utils.updateUser();

					this.$u.toast("更新成功");
				}
			});
		},
	},

	components: {},
};
</script>

<style scoped lang="scss"></style>
